<template>
  <view class="bar-sticky">
    <view
      class="status-line"
      :style="{
        height: lineHeight,
        background: navigationBarStyle.background || normal.background,
      }"
    ></view>
    <view
      class="bar-line"
      :style="{
        background: navigationBarStyle.background || normal.background,
      }"
    >
      <view
        class="bar-line container-in"
        :style="{
          background: navigationBarStyle.background || normal.background,
        }"
      >
        <view class="bar-font bar-content" v-if="!custom">
          <view
            class="icon-fanhui bar-back"
            :style="{ color: navigationBarStyle.iconColor || normal.iconColor }"
            v-if="showBack"
          >
            <view
              class="icon-nav flex-around"
              :style="{
                width: menuButtonInfo.width + 'px',
                height: menuButtonInfo.height + 'px',
              }"
            >
              <image
                src="/static/icon/icon-back.png"
                mode="widthFix"
                @click="goBack"
              ></image>
              <view class="line"></view>
              <image
                src="/static/icon/icon-home.png"
                mode="widthFix"
                @click="goHome"
              ></image>
            </view>
          </view>
          <view
            class="bar-title"
            :style="{ color: navigationBarStyle.fontColor || normal.fontColor }"
            >{{ navigationBarStyle.iconText }}</view
          >
        </view>
        <view class="bar-font container-in" v-else>
          <slot></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    custom: {
      type: Boolean,
      default: false,
    }, //自定义头部，否则沿用原生的头部样式
    navigationBarStyle: {
      type: Object,
      default: function () {
        return {
          background: "#8486f8",
          fontColor: "#000000",
          iconColor: "#000000",
          iconText: "一米一粉", //导航栏文字
        };
      },
    }, //原生头部自定义样式
    showBack: {
      type: Boolean,
      default: true,
    }, //是否显示回退图标，默认显示
  },
  data() {
    return {
      menuButtonInfo: {},
      normal: {
        background: "#F8F8F8",
        fontColor: "#FFF",
        iconColor: "#000000",
      }, //公用样式,个性化样式可通过传值实现
      lineHeight: "", //状态栏高度
    };
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // #endif
    const systemInfo = uni.getSystemInfoSync();
    // px转换到rpx的比例
    let pxToRpxScale = 750 / systemInfo.windowWidth;
    let systems = {
      ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
      navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
      ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
      ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
      ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
    };
    // 底部tabBar的高度
    systems.tabBarHeight =
      systems.ktxScreentHeight -
      systems.ktxStatusHeight -
      systems.navigationHeight -
      systems.ktxWindowHeight; // 底部tabBar的高度
    this.lineHeight = systems.ktxStatusHeight + "rpx";
    this.$emit("getHeight", systems);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
